<template>
	<div>
		<cl-crud @load="onLoad">
			<template #table-column-pic="{scope}">
				<el-image
					:preview-src-list="[scope.row.qrcodeUrl]"
					class="code-img"
					:src="scope.row.qrcodeUrl | image_ali"
				></el-image>
			</template>
			<template #table-column-qrcodeCircleUrl="{scope}">
				<el-image
					:preview-src-list="[scope.row.qrcodeCircleUrl]"
					class="code-img"
					:src="scope.row.qrcodeCircleUrl | image_ali"
				></el-image>
			</template>
			<template #table-column-status="{scope}">
				<div>
					<el-tag v-if="scope.row.status == 1" type="success">启用</el-tag>
					<el-tag type="info" v-if="scope.row.status == 0">禁用</el-tag>
				</div>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import store from '@/utils/store';
export default {
	data() {
		return {
			isShowCode: false,
			codeSrc: ''
		};
	},

	mounted() {},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.goodsMenagement.wxMiniprogramChannel)
				.set('table', {
					columns: [
						{
							label: '渠道ID',
							prop: 'id',
							align: 'center'
						},
						{
							label: '渠道名称',
							prop: 'name',
							align: 'center'
						},
						{
							label: '二维码',
							prop: 'pic',
							align: 'center',
							width: 200
						},
						{
							label: '小程序二维码',
							prop: 'qrcodeCircleUrl',
							align: 'center',
							width: 200
						},
						{
							label: '小程序首页路径',
							prop: 'path',
							align: 'center'
						},
						{
							label: '账号',
							prop: 'account',
							align: 'center'
						},
						{
							label: '分成比例',
							prop: 'scale',
							align: 'center'
						},
						{
							label: '备注',
							prop: 'remark',
							align: 'center',
							emptyText: '无'
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						}
					],
					op: {
						layout: ['edit', 'delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '120px',
						center: true,
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						{
							prop: 'id',
							label: '渠道ID',
							component: {
								name: 'el-input',
								attrs: {
									size: 'mini',
									platformPrice: '请输入渠道ID',
									disabled: true,
									type: 'Number'
								}
							},
							rules: {
								required: true,
								message: '渠道ID不能为空'
							}
						},
						{
							prop: 'name',
							label: '渠道名称',
							component: {
								name: 'el-input',
								attrs: {
									size: 'mini',
									platformPrice: '请输入渠道名称'
								}
							},
							rules: {
								required: true,
								message: '渠道名称不能为空'
							}
						},
						// {
						// 	prop: 'pic',
						// 	label: '二维码',
						// 	component: {
						// 		name: 'slot-channel-code'
						// 	}
						// },
						{
							prop: 'account',
							label: '账号',
							component: {
								name: 'el-input',
								attrs: {
									size: 'mini',
									platformPrice: '请输入账号'
								}
							},
							rules: {
								required: true,
								message: '账号不能为空'
							}
						},
						{
							prop: 'password',
							label: '密码',
							value: '',
							component: {
								name: 'el-input',
								attrs: {
									size: 'mini',
									platformPrice: '请输入密码',
									'show-password': true,
									autoComplete: 'new-password'
								}
							},
							rules: {
								required: true,
								message: '密码不能为空'
							}
						},
						{
							prop: 'scale',
							label: '分成比例(%)',
							value: 0,
							component: {
								name: 'el-input-number',
								attrs: {
									min: 0,
									max: 10000
								}
							},
							rules: [
								{
									required: true,
									message: '请输入分成比例',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'remark',
							label: '备注',
							component: {
								name: 'el-input',
								attrs: {
									size: 'mini',
									platformPrice: '请输入备注'
								}
							}
						},
						{
							label: '状态',
							prop: 'status',
							value: 1,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '启用',
										value: 1
									},
									{
										label: '禁用',
										value: 0
									}
								]
							}
						}
					]
				})
				.on('submit', (isEdit, data, { next, done }) => {
					if (isEdit) {
						if (data.password) {
							this.$confirm('您修改了密码，确定要继续操作吗', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							})
								.then(() => {
									next({ ...data });
								})
								.catch(() => {
									done();
								});
						} else {
							next({ ...data });
						}
					} else {
						next({ ...data });
					}
				})
				.on('open', (isEdit, data) => {
					this.isShowCode = isEdit;
					if (isEdit) {
						app.setData('upsert.items[prop:password].rules.required', false);
						// app.setData('upsert.items[prop:id].hidden', false);
						app.setData('upsert.items[prop:id].component.attrs.disabled', true);
					} else {
						app.setData('upsert.items[prop:password].rules.required', true);
						// app.setData('upsert.items[prop:id].hidden', true);
						app.setData('upsert.items[prop:id].component.attrs.disabled', false);
					}
					app.setForm('password', '');
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'query', 'flex1', 'slot-filter'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();

			app.refresh({
				size: 10
			});
		},
		createQRCode() {
			// if (this.crud.refs('upsert').validateField('name'))
			// if (this.crud.refs('upsert').validateField('channelId'))
			let platForm = store.get('platForm') || 'yzf';
			let id = this.crud.getData('upsert.form.channelId');
			let params = {
				// appId: '2004031105378692',
				page: `pages/index/index?channelId=${id}&app=${platForm}`
			};
			this.$service.common.createQRCode(params).then(res => {
				this.codeSrc = res;
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.code-img {
	width: 100px;
	height: 100px;
}
.channel-code {
	width: 100px;
	height: 100px;
	margin-top: 10px;
	border: 1px solid;
}
</style>
